<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闯关模式 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    /* ===== 基础样式 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #333;
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ===== 导航栏样式 ===== */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.95);
      padding: 15px 30px;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-brand {
      font-size: 24px;
      font-weight: bold;
      color: #764ba2;
      display: flex;
      align-items: center;
    }

    .nav-brand i {
      margin-right: 10px;
      font-size: 26px;
    }

    .nav-buttons {
      display: flex;
      gap: 15px;
    }

    /* ===== 按钮样式 ===== */
    .btn {
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
    }

    .btn-outline {
      border: 2px solid #764ba2;
      color: #764ba2;
      background: transparent;
    }

    .btn-primary {
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: white;
      box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .btn-success {
      background: linear-gradient(135deg, #28a745, #20c997);
      color: white;
      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-warning {
      background: linear-gradient(135deg, #ffc107, #fd7e14);
      color: white;
      box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    }

    .btn-danger {
      background: linear-gradient(135deg, #dc3545, #e83e8c);
      color: white;
      box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    }

    .btn-outline:hover {
      background: #764ba2;
      color: white;
    }

    /* ===== 主要内容区域 ===== */
    .main-content {
      background: white;
      border-radius: 15px;
      padding: 40px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      margin-bottom: 30px;
    }

    .welcome-section {
      text-align: center;
      margin-bottom: 40px;
    }

    .welcome-title {
      font-size: 36px;
      color: #333;
      margin-bottom: 15px;
    }

    .welcome-subtitle {
      font-size: 18px;
      color: #666;
      max-width: 600px;
      margin: 0 auto 30px;
      line-height: 1.6;
    }

    /* ===== 模式选择选项卡 ===== */
    .mode-tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      border-bottom: 2px solid #e9ecef;
    }

    .mode-tab {
      padding: 15px 30px;
      font-size: 18px;
      font-weight: 600;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;
      border-bottom: 3px solid transparent;
    }

    .mode-tab.active {
      color: #007bff;
      border-bottom: 3px solid #007bff;
    }

    .mode-tab:hover {
      color: #0056b3;
    }

    /* ===== 模式内容区域 ===== */
    .mode-content {
      display: none;
    }

    .mode-content.active {
      display: block;
    }

    /* ===== 当前知识点信息 ===== */
    .current-point-info {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 30px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .point-details h2 {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .point-meta {
      display: flex;
      gap: 20px;
      font-size: 14px;
      opacity: 0.9;
    }

    /* ===== 答题区域 ===== */
    .quiz-container {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
    }

    .quiz-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e9ecef;
    }

    .quiz-title {
      font-size: 24px;
      color: #333;
    }

    .quiz-stats {
      display: flex;
      gap: 20px;
      font-size: 16px;
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stat-value {
      font-weight: bold;
      color: #007bff;
    }

    /* ===== 倒计时样式 ===== */
    .countdown {
      font-size: 24px;
      font-weight: bold;
      color: #dc3545;
      padding: 10px 20px;
      background: rgba(220, 53, 69, 0.1);
      border-radius: 8px;
      border: 2px solid #dc3545;
    }

    /* ===== 题目样式 ===== */
    .question-container {
      margin-bottom: 30px;
    }

    .question-text {
      font-size: 20px;
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .options-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 15px;
    }

    .option-item {
      padding: 15px 20px;
      border: 2px solid #e9ecef;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
    }

    .option-item:hover {
      border-color: #007bff;
      background: rgba(0, 123, 255, 0.05);
    }

    .option-item.selected {
      border-color: #007bff;
      background: rgba(0, 123, 255, 0.1);
    }

    .option-item.correct {
      border-color: #28a745;
      background: rgba(40, 167, 69, 0.1);
    }

    .option-item.incorrect {
      border-color: #dc3545;
      background: rgba(220, 53, 69, 0.1);
    }

    .option-label {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e9ecef;
      border-radius: 50%;
      margin-right: 15px;
      font-weight: bold;
    }

    .option-item.selected .option-label {
      background: #007bff;
      color: white;
    }

    .option-item.correct .option-label {
      background: #28a745;
      color: white;
    }

    .option-item.incorrect .option-label {
      background: #dc3545;
      color: white;
    }

    /* ===== 解析区域 ===== */
    .explanation-container {
      margin-top: 30px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      border-left: 4px solid #007bff;
      display: none;
    }

    .explanation-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #007bff;
    }

    /* ===== 进度控制 ===== */
    .progress-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
    }

    .progress-buttons {
      display: flex;
      gap: 15px;
    }

    .progress-bar {
      flex-grow: 1;
      height: 8px;
      background: #e9ecef;
      border-radius: 4px;
      margin: 0 20px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #28a745, #20c997);
      border-radius: 4px;
      transition: width 0.3s;
    }

    /* ===== 结果统计区域 ===== */
    .results-container {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
      display: none;
    }

    .results-title {
      font-size: 28px;
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }

    .results-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .result-stat {
      text-align: center;
      padding: 20px;
      border-radius: 8px;
      background: #f8f9fa;
    }

    .result-value {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .result-label {
      font-size: 16px;
      color: #666;
    }

    .result-stat.score .result-value {
      color: #007bff;
    }

    .result-stat.correct .result-value {
      color: #28a745;
    }

    .result-stat.time .result-value {
      color: #fd7e14;
    }

    .result-stat.rank .result-value {
      color: #6f42c1;
    }

    /* ===== 经验成长区域 ===== */
    .experience-container {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
    }

    .experience-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .experience-title {
      font-size: 24px;
      color: #333;
    }

    .experience-level {
      font-size: 18px;
      font-weight: bold;
      color: #007bff;
    }

    .experience-bar {
      height: 20px;
      background: #e9ecef;
      border-radius: 10px;
      margin-bottom: 10px;
      overflow: hidden;
    }

    .experience-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffc107, #fd7e14);
      border-radius: 10px;
      transition: width 0.5s;
    }

    .experience-info {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
    }

    /* ===== 图表容器 ===== */
    .charts-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .chart-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .chart-title {
      font-size: 18px;
      margin-bottom: 15px;
      text-align: center;
      color: #333;
    }

    /* ===== 响应式设计 ===== */
    @media (max-width: 768px) {
      .nav-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
      }

      .navbar {
        flex-direction: column;
        gap: 15px;
      }

      .mode-tabs {
        flex-direction: column;
      }

      .quiz-header {
        flex-direction: column;
        gap: 15px;
      }

      .progress-controls {
        flex-direction: column;
        gap: 15px;
      }

      .progress-bar {
        width: 100%;
        margin: 10px 0;
      }

      .results-stats {
        grid-template-columns: 1fr 1fr;
      }

      .charts-container {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .main-content {
        padding: 20px 15px;
      }

      .point-meta {
        flex-direction: column;
        gap: 10px;
      }

      .results-stats {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="nav-brand">
      <i>🚀</i> 渐进学习平台
    </div>
    <div class="nav-buttons">
      <a href="#" class="btn btn-outline" id="backBtn">
        <i class="fas fa-arrow-left"></i> 返回知识点
      </a>
      <a href="#" class="btn btn-outline">
        <i class="fas fa-home"></i> 返回首页
      </a>
    </div>
  </nav>

  <!-- 主要内容区域 -->
  <div class="main-content">
    <div class="welcome-section">
      <h1 class="welcome-title">🎯 闯关模式</h1>
      <p class="welcome-subtitle">选择练习模式熟悉知识点，或直接闯关检验掌握程度</p>
    </div>

    <!-- 模式选择选项卡 -->
    <div class="mode-tabs">
      <div class="mode-tab active" data-mode="practice">练习模式</div>
      <div class="mode-tab" data-mode="challenge">直接闯关</div>
    </div>

    <!-- 当前知识点信息 -->
    <div class="current-point-info">
      <div class="point-details">
        <h2 id="pointTitle">Spring IoC容器原理</h2>
        <div class="point-meta">
          <span>难度: <strong id="pointDifficulty">中级</strong></span>
          <span>预计时间: <strong id="pointDuration">15分钟</strong></span>
          <span>经验值: <strong id="pointExperience">150</strong></span>
          <span>类型: <strong id="pointType">概念理解型</strong></span>
        </div>
      </div>
    </div>

    <!-- 练习模式内容 -->
    <div class="mode-content active" id="practice-content">
      <div class="quiz-container">
        <div class="quiz-header">
          <div class="quiz-title">练习模式 - 不限时学习</div>
          <div class="quiz-stats">
            <div class="stat-item">
              <i class="fas fa-question-circle"></i>
              <span>题目: <span class="stat-value" id="practiceCurrent">1</span>/<span id="practiceTotal">5</span></span>
            </div>
            <div class="stat-item">
              <i class="fas fa-check-circle"></i>
              <span>正确: <span class="stat-value" id="practiceCorrect">0</span></span>
            </div>
          </div>
        </div>

        <div class="question-container">
          <div class="question-text" id="practiceQuestion">
            什么是Spring IoC容器的核心功能？
          </div>
          <div class="options-container" id="practiceOptions">
            <!-- 选项将通过JS动态生成 -->
          </div>
        </div>

        <div class="explanation-container" id="practiceExplanation">
          <div class="explanation-title">解析</div>
          <div id="explanationText">Spring IoC容器的核心功能是控制反转和依赖注入，它将对象的创建和依赖关系的管理从应用程序代码转移到容器中。</div>
        </div>

        <div class="progress-controls">
          <div class="progress-buttons">
            <button class="btn btn-outline" id="prevBtn">
              <i class="fas fa-arrow-left"></i> 上一题
            </button>
            <button class="btn btn-primary" id="checkBtn">
              <i class="fas fa-check"></i> 检查答案
            </button>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" id="practiceProgress" style="width: 20%"></div>
          </div>
          <div class="progress-buttons">
            <button class="btn btn-success" id="nextBtn">
              下一题 <i class="fas fa-arrow-right"></i>
            </button>
            <button class="btn btn-warning" id="completePracticeBtn">
              <i class="fas fa-flag-checkered"></i> 完成练习
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 闯关模式内容 -->
    <div class="mode-content" id="challenge-content">
      <div class="quiz-container">
        <div class="quiz-header">
          <div class="quiz-title">直接闯关 - 限时挑战</div>
          <div class="quiz-stats">
            <div class="stat-item">
              <i class="fas fa-question-circle"></i>
              <span>题目: <span class="stat-value" id="challengeCurrent">1</span>/<span id="challengeTotal">8</span></span>
            </div>
            <div class="stat-item">
              <i class="fas fa-check-circle"></i>
              <span>正确: <span class="stat-value" id="challengeCorrect">0</span></span>
            </div>
            <div class="stat-item">
              <i class="fas fa-clock"></i>
              <span>剩余时间: <span class="countdown" id="countdown">15:00</span></span>
            </div>
          </div>
        </div>

        <div class="question-container">
          <div class="question-text" id="challengeQuestion">
            Spring中Bean的作用域不包括以下哪项？
          </div>
          <div class="options-container" id="challengeOptions">
            <!-- 选项将通过JS动态生成 -->
          </div>
        </div>

        <div class="progress-controls">
          <div class="progress-buttons">
            <button class="btn btn-outline" id="challengePrevBtn">
              <i class="fas fa-arrow-left"></i> 上一题
            </button>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" id="challengeProgress" style="width: 12.5%"></div>
          </div>
          <div class="progress-buttons">
            <button class="btn btn-success" id="challengeNextBtn">
              下一题 <i class="fas fa-arrow-right"></i>
            </button>
            <button class="btn btn-danger" id="submitChallengeBtn">
              <i class="fas fa-paper-plane"></i> 提交闯关
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 结果统计区域 -->
    <div class="results-container" id="resultsContainer">
      <h2 class="results-title" id="resultsTitle">闯关结果</h2>
      <div class="results-stats">
        <div class="result-stat score">
          <div class="result-value" id="finalScore">85</div>
          <div class="result-label">得分</div>
        </div>
        <div class="result-stat correct">
          <div class="result-value" id="finalCorrect">7</div>
          <div class="result-label">正确题目</div>
        </div>
        <div class="result-stat time">
          <div class="result-value" id="finalTime">12:34</div>
          <div class="result-label">用时</div>
        </div>
        <div class="result-stat rank">
          <div class="result-value" id="finalRank">青铜III</div>
          <div class="result-label">排位</div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 20px;">
        <button class="btn btn-primary" id="reviewBtn">
          <i class="fas fa-redo"></i> 查看解析
        </button>
        <button class="btn btn-success" id="nextPointBtn">
          下一个知识点 <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </div>

    <!-- 经验成长区域 -->
    <div class="experience-container">
      <div class="experience-header">
        <div class="experience-title">成长进度</div>
        <div class="experience-level">等级: <span id="userLevel">5</span></div>
      </div>
      <div class="experience-bar">
        <div class="experience-fill" id="experienceFill" style="width: 65%"></div>
      </div>
      <div class="experience-info">
        <span>当前经验: <span id="currentExp">650</span></span>
        <span>升级所需: <span id="nextLevelExp">1000</span></span>
      </div>
    </div>

    <!-- 图表容器 -->
    <div class="charts-container">
      <div class="chart-card">
        <div class="chart-title">知识点掌握情况</div>
        <canvas id="masteryChart"></canvas>
      </div>
      <div class="chart-card">
        <div class="chart-title">训练次数统计</div>
        <canvas id="trainingChart"></canvas>
      </div>
    </div>
  </div>
</div>

<script>
  // 模拟数据
  const practiceQuestions = [
    {
      id: 1,
      text: "什么是Spring IoC容器的核心功能？",
      options: [
        "A. 控制反转和依赖注入",
        "B. 面向切面编程",
        "C. 数据访问抽象",
        "D. 事务管理"
      ],
      correct: 0,
      explanation: "Spring IoC容器的核心功能是控制反转和依赖注入，它将对象的创建和依赖关系的管理从应用程序代码转移到容器中。"
    },
    {
      id: 2,
      text: "Spring中Bean的作用域不包括以下哪项？",
      options: [
        "A. singleton",
        "B. prototype",
        "C. request",
        "D. global"
      ],
      correct: 3,
      explanation: "Spring中Bean的作用域包括singleton、prototype、request、session、application和websocket，不包括global。"
    },
    {
      id: 3,
      text: "Spring框架中，@Autowired注解的作用是什么？",
      options: [
        "A. 自动装配Bean",
        "B. 定义Bean的作用域",
        "C. 配置事务",
        "D. 定义切面"
      ],
      correct: 0,
      explanation: "@Autowired注解用于自动装配Bean，Spring容器会自动查找匹配的Bean并注入到标注了@Autowired的属性、构造方法或方法中。"
    },
    {
      id: 4,
      text: "Spring MVC中的DispatcherServlet主要作用是什么？",
      options: [
        "A. 接收HTTP请求并分发给相应的处理器",
        "B. 处理数据库事务",
        "C. 管理Bean的生命周期",
        "D. 提供安全认证"
      ],
      correct: 0,
      explanation: "DispatcherServlet是Spring MVC的核心，它接收所有的HTTP请求，并根据配置分发给相应的处理器(Controller)进行处理。"
    },
    {
      id: 5,
      text: "Spring Boot的主要优点是什么？",
      options: [
        "A. 简化Spring应用初始搭建和开发过程",
        "B. 提供更强大的事务管理",
        "C. 替代Spring框架",
        "D. 提供新的编程模型"
      ],
      correct: 0,
      explanation: "Spring Boot的主要优点是简化Spring应用初始搭建和开发过程，通过自动配置和起步依赖减少配置工作。"
    }
  ];

  const challengeQuestions = [
    {
      id: 1,
      text: "Spring中Bean的作用域不包括以下哪项？",
      options: [
        "A. singleton",
        "B. prototype",
        "C. request",
        "D. global"
      ],
      correct: 3
    },
    {
      id: 2,
      text: "Spring框架中，@Autowired注解的作用是什么？",
      options: [
        "A. 自动装配Bean",
        "B. 定义Bean的作用域",
        "C. 配置事务",
        "D. 定义切面"
      ],
      correct: 0
    },
    {
      id: 3,
      text: "Spring MVC中的DispatcherServlet主要作用是什么？",
      options: [
        "A. 接收HTTP请求并分发给相应的处理器",
        "B. 处理数据库事务",
        "C. 管理Bean的生命周期",
        "D. 提供安全认证"
      ],
      correct: 0
    },
    {
      id: 4,
      text: "Spring Boot的主要优点是什么？",
      options: [
        "A. 简化Spring应用初始搭建和开发过程",
        "B. 提供更强大的事务管理",
        "C. 替代Spring框架",
        "D. 提供新的编程模型"
      ],
      correct: 0
    },
    {
      id: 5,
      text: "Spring中如何实现事务管理？",
      options: [
        "A. 使用@Transactional注解",
        "B. 实现TransactionManager接口",
        "C. 配置XML文件",
        "D. 以上都是"
      ],
      correct: 3
    },
    {
      id: 6,
      text: "Spring Security的核心功能是什么？",
      options: [
        "A. 认证和授权",
        "B. 数据验证",
        "C. 缓存管理",
        "D. 消息队列"
      ],
      correct: 0
    },
    {
      id: 7,
      text: "Spring Data JPA的主要作用是什么？",
      options: [
        "A. 简化数据访问层开发",
        "B. 提供ORM映射",
        "C. 管理数据库连接",
        "D. 执行SQL查询"
      ],
      correct: 0
    },
    {
      id: 8,
      text: "Spring Cloud的核心组件不包括？",
      options: [
        "A. Eureka - 服务发现",
        "B. Hystrix - 熔断器",
        "C. Zuul - 网关",
        "D. Kafka - 消息队列"
      ],
      correct: 3
    }
  ];

  // 用户数据和统计
  let userData = {
    level: 5,
    currentExp: 650,
    nextLevelExp: 1000,
    practiceCount: 12,
    challengeCount: 8,
    averageScore: 82,
    mastery: {
      "Spring基础": 85,
      "Spring MVC": 78,
      "Spring Boot": 90,
      "Spring Security": 65,
      "Spring Data": 72
    }
  };

  // 当前状态
  let currentState = {
    mode: 'practice', // 'practice' 或 'challenge'
    practice: {
      currentQuestion: 0,
      userAnswers: [],
      checked: false
    },
    challenge: {
      currentQuestion: 0,
      userAnswers: [],
      timeLeft: 15 * 60, // 15分钟，以秒为单位
      timer: null
    }
  };

  // DOM元素
  const modeTabs = document.querySelectorAll('.mode-tab');
  const modeContents = document.querySelectorAll('.mode-content');
  const practiceContent = document.getElementById('practice-content');
  const challengeContent = document.getElementById('challenge-content');
  const resultsContainer = document.getElementById('resultsContainer');

  // 初始化函数
  function init() {
    // 设置模式切换事件
    modeTabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const mode = tab.getAttribute('data-mode');
        switchMode(mode);
      });
    });

    // 初始化练习模式
    initPracticeMode();

    // 初始化闯关模式
    initChallengeMode();

    // 初始化图表
    initCharts();

    // 设置按钮事件
    setupButtonEvents();
  }

  // 切换模式
  function switchMode(mode) {
    // 更新选项卡状态
    modeTabs.forEach(tab => {
      if (tab.getAttribute('data-mode') === mode) {
        tab.classList.add('active');
      } else {
        tab.classList.remove('active');
      }
    });

    // 更新内容区域
    modeContents.forEach(content => {
      if (content.id === `${mode}-content`) {
        content.classList.add('active');
      } else {
        content.classList.remove('active');
      }
    });

    // 更新当前状态
    currentState.mode = mode;

    // 如果是闯关模式，启动计时器
    if (mode === 'challenge' && !currentState.challenge.timer) {
      startChallengeTimer();
    }
  }

  // 初始化练习模式
  function initPracticeMode() {
    // 设置题目总数
    document.getElementById('practiceTotal').textContent = practiceQuestions.length;

    // 显示第一题
    showPracticeQuestion(0);
  }

  // 显示练习题目
  function showPracticeQuestion(index) {
    const question = practiceQuestions[index];
    if (!question) return;

    // 更新当前题目编号
    document.getElementById('practiceCurrent').textContent = index + 1;

    // 更新进度条
    const progress = ((index + 1) / practiceQuestions.length) * 100;
    document.getElementById('practiceProgress').style.width = `${progress}%`;

    // 设置题目文本
    document.getElementById('practiceQuestion').textContent = question.text;

    // 清空选项容器
    const optionsContainer = document.getElementById('practiceOptions');
    optionsContainer.innerHTML = '';

    // 添加选项
    question.options.forEach((option, i) => {
      const optionElement = document.createElement('div');
      optionElement.className = 'option-item';
      if (currentState.practice.checked && i === question.correct) {
        optionElement.classList.add('correct');
      } else if (currentState.practice.checked && currentState.practice.userAnswers[index] === i && i !== question.correct) {
        optionElement.classList.add('incorrect');
      } else if (currentState.practice.userAnswers[index] === i) {
        optionElement.classList.add('selected');
      }

      optionElement.innerHTML = `
                <div class="option-label">${String.fromCharCode(65 + i)}</div>
                <div class="option-text">${option}</div>
            `;

      optionElement.addEventListener('click', () => {
        if (!currentState.practice.checked) {
          selectPracticeOption(index, i);
        }
      });

      optionsContainer.appendChild(optionElement);
    });

    // 更新按钮状态
    updatePracticeButtons();

    // 显示或隐藏解析
    const explanationContainer = document.getElementById('practiceExplanation');
    if (currentState.practice.checked) {
      document.getElementById('explanationText').textContent = question.explanation;
      explanationContainer.style.display = 'block';
    } else {
      explanationContainer.style.display = 'none';
    }
  }

  // 选择练习选项
  function selectPracticeOption(questionIndex, optionIndex) {
    currentState.practice.userAnswers[questionIndex] = optionIndex;
    showPracticeQuestion(questionIndex);
  }

  // 检查练习答案
  function checkPracticeAnswer() {
    currentState.practice.checked = true;
    showPracticeQuestion(currentState.practice.currentQuestion);

    // 更新正确题目数
    const correctCount = currentState.practice.userAnswers.reduce((count, answer, index) => {
      return count + (answer === practiceQuestions[index].correct ? 1 : 0);
    }, 0);
    document.getElementById('practiceCorrect').textContent = correctCount;
  }

  // 更新练习按钮状态
  function updatePracticeButtons() {
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const checkBtn = document.getElementById('checkBtn');
    const completeBtn = document.getElementById('completePracticeBtn');

    // 上一题按钮
    prevBtn.disabled = currentState.practice.currentQuestion === 0;

    // 下一题按钮
    nextBtn.disabled = currentState.practice.currentQuestion === practiceQuestions.length - 1;

    // 检查答案按钮
    checkBtn.disabled = currentState.practice.checked ||
            currentState.practice.userAnswers[currentState.practice.currentQuestion] === undefined;

    // 完成练习按钮
    completeBtn.disabled = !currentState.practice.checked ||
            currentState.practice.currentQuestion !== practiceQuestions.length - 1;
  }

  // 初始化闯关模式
  function initChallengeMode() {
    // 设置题目总数
    document.getElementById('challengeTotal').textContent = challengeQuestions.length;

    // 显示第一题
    showChallengeQuestion(0);
  }

  // 显示闯关题目
  function showChallengeQuestion(index) {
    const question = challengeQuestions[index];
    if (!question) return;

    // 更新当前题目编号
    document.getElementById('challengeCurrent').textContent = index + 1;

    // 更新进度条
    const progress = ((index + 1) / challengeQuestions.length) * 100;
    document.getElementById('challengeProgress').style.width = `${progress}%`;

    // 设置题目文本
    document.getElementById('challengeQuestion').textContent = question.text;

    // 清空选项容器
    const optionsContainer = document.getElementById('challengeOptions');
    optionsContainer.innerHTML = '';

    // 添加选项
    question.options.forEach((option, i) => {
      const optionElement = document.createElement('div');
      optionElement.className = 'option-item';
      if (currentState.challenge.userAnswers[index] === i) {
        optionElement.classList.add('selected');
      }

      optionElement.innerHTML = `
                <div class="option-label">${String.fromCharCode(65 + i)}</div>
                <div class="option-text">${option}</div>
            `;

      optionElement.addEventListener('click', () => {
        selectChallengeOption(index, i);
      });

      optionsContainer.appendChild(optionElement);
    });

    // 更新按钮状态
    updateChallengeButtons();
  }

  // 选择闯关选项
  function selectChallengeOption(questionIndex, optionIndex) {
    currentState.challenge.userAnswers[questionIndex] = optionIndex;
    showChallengeQuestion(questionIndex);
  }

  // 更新闯关按钮状态
  function updateChallengeButtons() {
    const prevBtn = document.getElementById('challengePrevBtn');
    const nextBtn = document.getElementById('challengeNextBtn');
    const submitBtn = document.getElementById('submitChallengeBtn');

    // 上一题按钮
    prevBtn.disabled = currentState.challenge.currentQuestion === 0;

    // 下一题按钮
    nextBtn.disabled = currentState.challenge.currentQuestion === challengeQuestions.length - 1;

    // 提交按钮 - 只有所有题目都回答了才能提交
    const allAnswered = currentState.challenge.userAnswers.length === challengeQuestions.length &&
            !currentState.challenge.userAnswers.includes(undefined);
    submitBtn.disabled = !allAnswered;
  }

  // 启动闯关计时器
  function startChallengeTimer() {
    // 清除现有计时器
    if (currentState.challenge.timer) {
      clearInterval(currentState.challenge.timer);
    }

    // 更新倒计时显示
    updateCountdownDisplay();

    // 启动新计时器
    currentState.challenge.timer = setInterval(() => {
      currentState.challenge.timeLeft--;
      updateCountdownDisplay();

      // 时间到，自动提交
      if (currentState.challenge.timeLeft <= 0) {
        clearInterval(currentState.challenge.timer);
        submitChallenge();
      }
    }, 1000);
  }

  // 更新倒计时显示
  function updateCountdownDisplay() {
    const minutes = Math.floor(currentState.challenge.timeLeft / 60);
    const seconds = currentState.challenge.timeLeft % 60;
    document.getElementById('countdown').textContent =
            `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    // 时间不足5分钟时改变颜色
    if (currentState.challenge.timeLeft < 300) {
      document.getElementById('countdown').style.color = '#dc3545';
    }
  }

  // 提交闯关
  function submitChallenge() {
    // 停止计时器
    clearInterval(currentState.challenge.timer);
    currentState.challenge.timer = null;

    // 计算得分
    let correctCount = 0;
    currentState.challenge.userAnswers.forEach((answer, index) => {
      if (answer === challengeQuestions[index].correct) {
        correctCount++;
      }
    });

    const score = Math.round((correctCount / challengeQuestions.length) * 100);
    const timeUsed = 15 * 60 - currentState.challenge.timeLeft;
    const minutes = Math.floor(timeUsed / 60);
    const seconds = timeUsed % 60;
    const timeText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    // 确定排位
    let rank = "青铜III";
    if (score >= 90) rank = "王者";
    else if (score >= 80) rank = "钻石";
    else if (score >= 70) rank = "黄金";
    else if (score >= 60) rank = "白银";

    // 更新结果统计
    document.getElementById('finalScore').textContent = score;
    document.getElementById('finalCorrect').textContent = `${correctCount}/${challengeQuestions.length}`;
    document.getElementById('finalTime').textContent = timeText;
    document.getElementById('finalRank').textContent = rank;

    // 显示结果容器
    resultsContainer.style.display = 'block';

    // 隐藏闯关内容
    challengeContent.style.display = 'none';

    // 更新用户数据
    updateUserDataAfterChallenge(score, correctCount);
  }

  // 闯关后更新用户数据
  function updateUserDataAfterChallenge(score, correctCount) {
    // 增加训练次数
    userData.challengeCount++;

    // 计算经验值奖励 (基础经验 + 表现奖励)
    const baseExp = 150; // 知识点基础经验值
    const performanceBonus = Math.round(score / 10); // 根据得分给予额外奖励
    const expGained = baseExp + performanceBonus;

    // 更新经验值
    userData.currentExp += expGained;

    // 检查是否升级
    while (userData.currentExp >= userData.nextLevelExp) {
      userData.currentExp -= userData.nextLevelExp;
      userData.level++;
      userData.nextLevelExp = Math.round(userData.nextLevelExp * 1.2); // 每次升级所需经验增加20%
    }

    // 更新平均得分
    userData.averageScore = Math.round((userData.averageScore * (userData.challengeCount - 1) + score) / userData.challengeCount);

    // 更新UI
    updateUserStatsUI();

    // 更新图表
    updateCharts();
  }

  // 更新用户统计UI
  function updateUserStatsUI() {
    document.getElementById('userLevel').textContent = userData.level;
    document.getElementById('currentExp').textContent = userData.currentExp;
    document.getElementById('nextLevelExp').textContent = userData.nextLevelExp;

    const expPercentage = (userData.currentExp / userData.nextLevelExp) * 100;
    document.getElementById('experienceFill').style.width = `${expPercentage}%`;
  }

  // 初始化图表
  function initCharts() {
    // 知识点掌握情况图表
    const masteryCtx = document.getElementById('masteryChart').getContext('2d');
    const masteryLabels = Object.keys(userData.mastery);
    const masteryData = Object.values(userData.mastery);

    new Chart(masteryCtx, {
      type: 'bar',
      data: {
        labels: masteryLabels,
        datasets: [{
          label: '掌握度(%)',
          data: masteryData,
          backgroundColor: [
            'rgba(255, 99, 132, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(255, 206, 86, 0.7)',
            'rgba(75, 192, 192, 0.7)',
            'rgba(153, 102, 255, 0.7)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            max: 100
          }
        }
      }
    });

    // 训练次数统计图表
    const trainingCtx = document.getElementById('trainingChart').getContext('2d');
    new Chart(trainingCtx, {
      type: 'doughnut',
      data: {
        labels: ['练习模式', '闯关模式'],
        datasets: [{
          data: [userData.practiceCount, userData.challengeCount],
          backgroundColor: [
            'rgba(54, 162, 235, 0.7)',
            'rgba(255, 99, 132, 0.7)'
          ],
          borderColor: [
            'rgba(54, 162, 235, 1)',
            'rgba(255, 99, 132, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true
      }
    });
  }

  // 更新图表
  function updateCharts() {
    // 在实际应用中，这里会重新绘制图表
    // 为了简化，我们只是重新初始化图表
    initCharts();
  }

  // 设置按钮事件
  function setupButtonEvents() {
    // 练习模式按钮
    document.getElementById('prevBtn').addEventListener('click', () => {
      if (currentState.practice.currentQuestion > 0) {
        currentState.practice.currentQuestion--;
        showPracticeQuestion(currentState.practice.currentQuestion);
      }
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      if (currentState.practice.currentQuestion < practiceQuestions.length - 1) {
        currentState.practice.currentQuestion++;
        showPracticeQuestion(currentState.practice.currentQuestion);
      }
    });

    document.getElementById('checkBtn').addEventListener('click', () => {
      checkPracticeAnswer();
    });

    document.getElementById('completePracticeBtn').addEventListener('click', () => {
      // 完成练习，可以切换到闯关模式或显示结果
      alert('练习完成！你可以开始闯关模式了。');
      switchMode('challenge');
    });

    // 闯关模式按钮
    document.getElementById('challengePrevBtn').addEventListener('click', () => {
      if (currentState.challenge.currentQuestion > 0) {
        currentState.challenge.currentQuestion--;
        showChallengeQuestion(currentState.challenge.currentQuestion);
      }
    });

    document.getElementById('challengeNextBtn').addEventListener('click', () => {
      if (currentState.challenge.currentQuestion < challengeQuestions.length - 1) {
        currentState.challenge.currentQuestion++;
        showChallengeQuestion(currentState.challenge.currentQuestion);
      }
    });

    document.getElementById('submitChallengeBtn').addEventListener('click', () => {
      submitChallenge();
    });

    // 结果页面按钮
    document.getElementById('reviewBtn').addEventListener('click', () => {
      alert('查看解析功能将在后续版本中实现');
    });

    document.getElementById('nextPointBtn').addEventListener('click', () => {
      alert('进入下一个知识点');
    });

    // 返回按钮
    document.getElementById('backBtn').addEventListener('click', () => {
      if (confirm('确定要返回吗？当前进度将不会保存。')) {
        // 在实际应用中，这里会跳转到知识点页面
        alert('返回知识点页面');
      }
    });
  }

  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>